<style lang="scss" scoped>
@import "@/assets/css/variable";
.activityShow {
  // position: absolute;
  // top: 0;
  // bottom: 0;
  // width: 100%;
  // min-height: 100%;
  box-sizing: border-box;
  background: url("../../../assets/img/bg5.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100%;
  // background-image: url('imgBackgroud');
  // background-image: url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-d6d772e8-edba-4e51-a6a3-850f3326ab0d/4872975a-9026-4edb-b406-3194deea63dd.png);
  .scroll {
    position: fixed;
    display: flex;
    align-items: center;
    top: 2rem;
    left: 1rem;
    height: 2rem;
    background: rgba(0, 0, 0, 0.2);
    line-height: 2rem;
    border-radius: 5px;
    color: #fff;
    text-align: center;
    padding: 0 10px;
    // background-color: rgba(255, 0, 0, 0.05);
    .name {
      margin-left: 6px;
    }
  }
  .activyshow_data {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 2.4rem;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    font-size: 1.2rem;
    // border-radius: 2.4rem;
    border-radius: 0 0 50% 50%;
    z-index: 88;
    div {
      display: flex;
      align-items: center;
      .icon_btn {
        color: var(--btn_color);
        margin-right: 5px;
        font-size: 1.4rem;
      }
    }
  }

  .tocase {
    // position: fixed;
    // top: 0;
    // left: 0;
    // right: 0;
    // background-color: rgb(255, 145, 0);
    color: white;
    padding: 0.8rem 1.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .mask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    overflow: hidden;
    z-index: 222;
    top: 0;
    left: 0;
  }

  .lottery-alert {
    max-width: 40rem;
    text-align: center;
    z-index: 10000;
    border-radius: 1rem;
    background: #fff;
    padding: 2rem;
    position: fixed;
    left: 0;
    right: 0;
    margin: auto 2rem;
    top: 50%;
    transform: translateY(-50%);
    .close-icon {
      position: fixed;
      width: 2.4rem;
      height: 2.4rem;
      right: 0.7rem;
      top: 0.7rem;
      border-radius: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3002;
    }
  }

  .lottery-alert h1 {
    font-size: 1.8rem;
    font-weight: bold;
    color: #d92b2f;
  }

  .lottery-alert img {
    display: block;
    margin: 0 auto;
  }

  .lottery-alert h2 {
    font-weight: normal;
    color: #d92b2f;
    font-size: 1.5rem;
    padding-top: 1.5rem;
  }

  .lottery-alert p {
    color: #666;
    font-size: 1.6rem;
    padding-top: 0.5rem;
  }

  .lottery-alert .btnsave {
    border-radius: 0.3rem;
    box-shadow: none;
    height: 4rem;
    cursor: pointer;
    line-height: 4rem;
    color: #fff;
    margin-top: 1.2rem;
    background: var(--btn_color);
    font-size: 1.6rem;
  }
  .top {
    // background-image: url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-d6d772e8-edba-4e51-a6a3-850f3326ab0d/4872975a-9026-4edb-b406-3194deea63dd.png);
    // background-color: #fff;

    box-sizing: border-box;
    .up {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      height: 170px;
      margin-top: 1.5rem;
      // background-color: #fff;
      .img {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        padding-top: 26px;
        width: 80%;
        height: 110px;
        img {
          width: 100%;
        }
      }
      .up-img {
        position: absolute;
        top: 1rem;
        right: 0;
        width: 7rem;
        height: 2.1rem;
        background-color: #ff0000;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        line-height: 2.1rem;
        font-size: 13px;
        text-align: center;
        color: #fff;
      }
      .title {
        word-wrap: break-word;
        word-break: normal;
        width: 70%;
        padding: 0.2rem 0;
        background-color: var(--btn_color);
        border-radius: 10px;
        line-height: 1.7rem;
        text-align: center;
        color: #fff;
        font-size: 1.4rem;
        margin-top: 0.3rem;
        letter-spacing: 0.3rem;
      }
      .text {
        color: #fff;
        .shu {
          margin: 0 8px;
        }
      }
      .times {
        margin: 0.6rem 0;
        // color: #fddf43;
        :first-child {
          margin-right: 12px;
        }
      }
      .number_of {
        margin-bottom: 0.3rem;
        color: #fddf43;
      }
    }
  }
  .powerdby {
    // position: fixed;
    // top: 0;
    // left: 0;
    // right: 0;
    padding: 0.8rem 1.6rem;
    text-align: center;
    text-decoration: underline;
    color: #666666;
  }
  // .top{
  //   margin-top: 2.8rem;
  // }
  .veri_gift {
    box-sizing: border-box;
    position: fixed;
    width: 6rem;
    z-index: 999;
    right: 0.5rem;
    bottom: 6.5rem;
    border-radius: 5px;
    background-color: var(--theme_color);
    border: 0;
    // box-shadow: 1px 1px 1px #555555;

    .active {
      box-sizing: border-box;
      widows: 100%;
      height: 50%;
      line-height: 3rem;
      overflow: hidden;
      color: #fff;
      text-align: center;
      border-bottom: 1px solid #fff;
    }
    :last-child {
      border-bottom: 1px solid transparent;
    }
  }

  .title_text {
    width: 100%;
    height: 2rem;
    text-align: center;
    margin-top: 1rem;
    color: var(--theme_color);
    font-size: 15px;
  }

  .vanPopup {
    box-sizing: border-box;
    background-color: var(--theme_color);
    font-size: 15px;
    overflow: hidden;
    // .gift_pop1 {
    //   position: relative;
    //   box-sizing: border-box;
    //   display: flex;
    //   flex-direction: column;
    //   justify-content: center;
    //   align-items: center;
    //   height: auto;
    //   background-color: white;
    //   position: relative;
    //   padding: 2rem 0;
    //   background-color: var(--theme_color);
    //   .close-icon {
    //     position: fixed;
    //     width: 2.4rem;
    //     height: 2.4rem;
    //     right: 0.7rem;
    //     bottom: 45%;
    //     border-radius: 1.2rem;
    //     display: flex;
    //     align-items: center;
    //     justify-content: center;
    //     z-index: 2;
    //   }
    // }
    .gift_pop {
      position: relative;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: auto;
      background-color: white;
      position: relative;
      padding: 2rem 0;
      background-color: var(--theme_color);
      .close-icon {
        position: fixed;

        width: 2.4rem;
        height: 2.4rem;
        right: 0.7rem;
        bottom: 55%;
        border-radius: 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
      }
    }
  }

  .introduce {
    background-color: white;
    padding: 1.8rem;
  }
  .applyList {
    background-color: white;
    padding: 1.8rem;
    .table-header {
      display: flex;
      justify-content: space-between;
      font-size: 1.3rem;
      color: #222;
    }
    .table-content {
      display: flex;
      justify-content: space-between;
      font-size: 1.2rem;
      color: #333;
      padding-top: 1rem;
    }
  }
  .contact {
    background-color: white;
    padding: 1.8rem;
    .content {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 9rem;
      .line {
        display: flex;
        align-items: center;
        span,
        a {
          margin-left: 1rem;
          font-size: 1.3rem;
        }
      }
    }
  }
  .show {
    height: auto;
    background-color: white;
    position: relative;
    .close-icon {
      position: absolute;
      width: 2.4rem;
      height: 2.4rem;
      right: 0.7rem;
      top: 0.7rem;
      border-radius: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }
    img {
      width: 100%;
    }
    .posterHtml {
      // display: flex;
      #coverImg {
        display: flex;
        width: 100%;
        max-height: 30rem;
        object-fit: cover;
      }
      .imgBox {
        width: 100%;
      }
      .content {
        padding: 1.2rem;
        display: flex;
        height: 14rem;
        justify-content: space-between;
        .desc {
          word-wrap: break-word;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          height: 100%;
          .line1 {
            font-size: 2rem;
            font-weight: bold;
            color: #333;
            display: flex;
            align-items: center;
          }
          .line2 {
            font-size: 2.2rem;
            font-weight: 900;
            color: #111;
            // overflow: hidden;
            // text-overflow: ellipsis;
            // display: -webkit-box;
            // -webkit-line-clamp:2; /* 设置行数 */
            // -webkit-box-orient:vertical;
          }
        }
        .qrcode {
        }
      }
      .bottom-box {
        padding-bottom: 2rem;
        padding-left: 1.2rem;
        padding-right: 1.2rem;
      }
    }
  }
}
.imgBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba($color: #000000, $alpha: 0.98);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3000;
  img {
    width: 100%;
  }
  .tips {
    color: white;
  }
  .close-icon {
    position: fixed;
    width: 2.4rem;
    height: 2.4rem;
    right: 0.7rem;
    top: 0.7rem;
    border-radius: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3002;
  }
}
.fix-bottom {
  display: flex;
  justify-content: space-around;
  overflow: hidden;
  position: fixed;
  bottom: 1rem;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 3;
  box-sizing: border-box;
  .release_btn1 {
    width: 46%;
    background-color: var(--btn_color);
    border-radius: 8px;
    color: #fff;
    border: 0;
    letter-spacing: 0.2rem;
  }
  .release_btn2 {
    width: 46%;
    background-color: var(--btn_color);
    border-radius: 8px;
    color: #fff;
    border: 0;
    letter-spacing: 0.1rem;
  }
  .adress_btn {
    .van-button--danger {
      background-color: var(--theme_color) !important;
    }
  }
}
</style>
<template>
  <div
    class="activityShow"
    :style="{
      '--theme_color': theme_color,
      '--btn_color': btn_color,
    }"
  >
    <music-play v-if="activityItem.music" :activityItem="activityItem"></music-play>

    <div class="activyshow_data">
      <div>
        <van-icon name="eye-o" class="icon_btn" />
        <span>{{ activityItem.browse_num || 0 }}</span>
      </div>
      <div>
        <van-icon name="friends-o" class="icon_btn" />
        <span>{{ join_num || 0.0 }}</span>
      </div>
      <div>
        <van-icon name="ellipsis" class="icon_btn" />
        <span>{{ draw || 0.0 }}</span>
      </div>
    </div>

    <van-skeleton :row="$store.state.skeletonRow" :loading="loadingSkeleton">
      <div class="top">
        <div class="up">
          <div class="img"><img src="../../../assets/img/cj.png" alt="" /></div>
          <div></div>
          <div class="title">{{ activityItem.merchantname }}</div>
        </div>
        <LuckyWheel
          :style="{
            width: '300px',
            height: '300px',
            margin: '0 auto',
            marginTop: '-15px',
          }"
          ref="LuckyWheel"
          :default-style="{
            fontColor: '#d64737',
            fontSize: '12px',
          }"
          :blocks="[{ padding: '13px', background: '#d64737' }]"
          :prizes="prizes"
          :buttons="[
            { radius: '50px', background: '#d64737' },
            { radius: '45px', background: '#fff' },
            { radius: '41px', background: '#f6c66f', pointer: true },
            {
              radius: '35px',
              background: '#ffdea0',
              imgs: [
                {
                  src: require('./../../../assets/img/anniu.png'),
                  width: '80%',
                  top: '-45%',
                },
              ],
            },
          ]"
          @start="startCallBack"
          @end="endCallBack"
        />
      </div>
      <div class="fix-bottom">
        <van-button
          size="normal"
          v-if="activityItem.act_release == 1"
          @click="releaseClick"
          class="release_btn1"
          block
          >创建活动</van-button
        >
        <!-- <a class="a_click"></a> -->
        <van-button size="normal" block @click="shareBtn1" class="release_btn2"
          >{{activityItem.status == 1? '邀请好友来帮忙': '活动结束'}}</van-button
        >
      </div>
    </van-skeleton>
    <!-- 分享 -->
    <van-popup v-model="showPop" position="bottom" round>
      <div class="show">
        <span
          class="close-icon"
          :style="{ backgroundColor: theme_color }"
          @click="showPop = false"
          ><van-icon color="white" name="cross"
        /></span>
        <!-- 海报html元素 -->
        <div id="posterHtml" class="posterHtml">
          <img id="coverImg" :src="copyimg" />
          <!-- <div id="imgBox"></div> -->
          <div class="content">
            <div class="desc">
              <div class="line1">
                <span>快来参加</span>
                <van-icon class="margL-m" name="fire" :color="theme_color" />
              </div>
              <div class="line2">{{ activityItem.title }}</div>
            </div>
            <!-- 二维码 -->
            <!-- <div class="qrcode" id="qrcode" ref="qrcode"></div> -->
            <canvas class="qrcode" id="qrCode-canvas"></canvas>
          </div>
          <div class="margT-l bottom-box">
            <div class="fs-16 t-bold">{{ activityItem.merchantname }}</div>
            <div class="color-m margT-m">
              本次活动{{ activityItem.end_time }}结束
            </div>
          </div>
        </div>
        <div class="padding-lr">
          <van-button
            :color="theme_color"
            block
            @click="createPoster"
            :loading="createLoading"
            >生成海报</van-button
          >
        </div>
      </div>
    </van-popup>
    <div class="imgBox" v-if="showImgPop">
      <img :src="createImg" />
      <div class="tips margT-m fs-16">Tips:长按以上海报即可保存或转发</div>
      <span
        class="close-icon"
        :style="{ backgroundColor: theme_color }"
        @click="showImgPop = false"
        ><van-icon color="white" name="cross"
      /></span>
    </div>

    <!-- 奖品列表 -->
    <van-popup
      class="vanPopup"
      v-if="showGift"
      v-model="showGift"
      position="bottom"
      :style="{ height: '60%' }"
      round
    >
      <div class="gift_pop">
        <span
          class="close-icon"
          :style="{ backgroundColor: btn_color }"
          @click="showGift = false"
          ><van-icon color="white" name="cross"
        /></span>
        <div style="padding: 0 15px; width: 100%">
        <infor-prize
          :activityItem="activityItem"
          :openid="openid"
          :prizeLists="prizeLists"
        ></infor-prize>
        </div>
      </div>
    </van-popup>

    <!-- 助力排行 -->
    <van-popup
      class="vanPopup"
      v-if="showHlep"
      v-model="showHlep"
      position="bottom"
      :style="{ height: '60%' }"
      round
    >
      <div class="gift_pop">
        <span
          class="close-icon"
          :style="{ backgroundColor: btn_color }"
          @click="showHlep = false"
          ><van-icon color="white" name="cross"
        /></span>
        <div style="padding: 0 15px; width: 100%">
        <infor-hlep
          :activityItem="activityItem"
          :openid="openid"
          :helpList="helpList"
        ></infor-hlep>
      </div>
      </div>
    </van-popup>

    <!-- 活动规则 -->

    <van-popup
      class="vanPopup"
      v-if="ruelsShow"
      v-model="ruelsShow"
      position="bottom"
      :style="{ height: '60%' }"
      round
    >
      <div class="gift_pop">
        <span
          class="close-icon"
          :style="{ backgroundColor: btn_color }"
          @click="ruelsShow = false"
          ><van-icon color="white" name="cross"
        /></span>
        <div style="padding: 0 15px; width: 100%">
        <infor-ruels :activityItem="activityItem"></infor-ruels>
      </div>
      </div>
    </van-popup>

    <!-- 商家信息 merchants -->
    <van-popup
      class="vanPopup"
      v-model="merchantsShow"
      position="bottom"
      :style="{ height: '60%' }"
      round
    >
      <div class="gift_pop">
        <span
          class="close-icon"
          :style="{ backgroundColor: btn_color }"
          @click="merchantsShow = false"
          ><van-icon color="white" name="cross"
        /></span>
        <div style="padding: 0 15px; width: 100%">
        <infor-mation :activityItem="activityItem"></infor-mation>
      </div>
      </div>
    </van-popup>

    <!-- 滚动 -->
    <scroll-data
      v-if="scrollList.length != 0"
      :scrollList="scrollList"
    ></scroll-data>
    <!-- 个人 -->
    <personal-nents
      @merchantsClick="merchantsClick"
      @ruelsClick="ruelsClick"
      @publishedClick="publishedClick"
      @giftClick="giftClick"
    ></personal-nents>

    <!-- 分享蒙版 -->
    <share-mask v-if="cancelShow" @shareChange="shareChange" @cancelChange="cancelChange"></share-mask>


    <!-- 中奖弹窗 -->
    <div class="mask" v-if="showAdress"></div>
    <div class="lottery-alert" v-if="showAdress">
      <span
        class="close-icon"
        :style="{ backgroundColor: btn_color }"
        @click="btnClick"
        ><van-icon color="white" name="cross"
      /></span>
      <h1 v-if="prizeList[indexs].name == '谢谢参与'">很遗憾</h1>
      <h1 v-else>恭喜您</h1>
      <p><img :src="prizeList[indexs].picture" alt="" /></p>
      <div v-if="prizeList[indexs].name == '谢谢参与'"></div>
      <template v-else>
        <h2>获得{{ prizeList[indexs].name }}</h2>
        <div class="btnsave" @click="adressClick" v-if="prize_type == 2">
          请填写收货地址,以便商家发送奖品
        </div>
        <div class="btnsave" @click="sinceClick" v-if="prize_type == 1">
          请联系商家,核销奖品
        </div>
      </template>

      <div
        class="btnsave"
        @click="continueClick"
        v-if="prizeList[indexs].name == '谢谢参与'"
      >
        继续抽奖
      </div>
    </div>
  </div>
</template>

<script>
import LuckDraw from "vue-luck-draw";
Vue.use(LuckDraw);
import {
  Button,
  Toast,
  Tab,
  Tabs,
  Icon,
  Dialog,
  Popup,
  AddressEdit,
  Area,
  Skeleton,
  Image as VanImage,
} from "vant";
import QRCode from "qrcode";
import html2canvas from "html2canvas";
// import Header from "@/components/headerlotto";
// import imgBackgroud from "@/assets/img/webp.png";
import { areaList } from "@vant/area-data";
import ScrollData from "@/components/ScrollData";
import PersonalNents from "@/components/PersonalNents";
import InforMation from "@/components/InforMation";
import InforRuels from "@/components/InforRuels";
import InforPrize from "@/components/InforPrize";
import InforHlep from "@/components/InforHlep";
import MusicPlay from "@/components/MusicPlay";
import ShareMask from "@/components/ShareMask";
// import { LuckyGrid } from 'lucky-canvas'
// import func from 'vue-editor-bridge';
// import utils from '@/assets/js/utils.js'
// const name = '九宫格'
// const version = '1.0.1'
// const imgBackground = require('')
import { myMixins } from "@/assets/js/mixins.js";
export default {
  mixins: [myMixins],
  name: "activityShow",
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Dialog.name]: Dialog,
    [Popup.name]: Popup,
    [AddressEdit.name]: AddressEdit,
    [Area.name]: Area,
    [Toast.name]: Toast,
    [Skeleton.name]: Skeleton,
    VanImage,
    ScrollData,
    PersonalNents,
    InforMation,
    InforRuels,
    InforPrize,
    InforHlep,
    MusicPlay,
    ShareMask
    // Header
  },
  data() {
    return {
      loadingSkeleton: true,
      // imgBackgroud: imgBackgroud,
      activityItem: "",
      active: 0,
      openid: "",
      p_openid: "",
      is_apply: false,
      posterImg: "",
      showPop: false,
      showImgPop: false,
      createLoading: false,
      id: "",
      thisItem: {},
      createImg: "",
      config: "",
      prizes: [],
      activity_id: Number(this.$route.params.id),
      index: 0,
      indexs: 0,
      areaList,
      searchResult: [],
      showAdress: false,
      // 填写地址按钮
      adressShow: false,
      verificationShow: true,
      // giftShow: true,
      prize_type: 0,
      timer: false,
      showGift: false,
      showHlep: false,
      prizeLists: [],
      // 倒计时
      end_time: "",
      // 拼团成功耗费时间
      times: "",
      // 天时分秒
      dd: "00",
      hh: "00",
      mm: "00",
      ss: "00",
      ruelsShow: false,
      scrollList: [],
      index: 0,
      num: 0,
      scrollShow: false,
      textTitle: "",
      introduce: [],
      draw: 0,
      helpList: [],
      merchantsShow: false,
      is_need_pay: "",
      join_num: "",
      totst: Toast.loading({
        forbidClick: true,
        message: "加载中...",
      }),
      theme_color: "",
      copyimg: "",
      order_id: "",
      is_edit: 0,
      staff_id: null,
      btn_color: "#f8d384",
      showToast: false,
      winningData: {},
	  domain:{},
    cancelShow: false
    };
  },
  computed: {
    // getOpenId() {
    //   this.openid = this.$store.state.openid
    //   return this.openid
    // }
  },
  created() {
	  const _this = this;
	  _this.staff_id = _this.$route.query.staff_id;
	  _this.activityItem = this.$store.state.activityItem;
	  this.getDomain()
  },
  mounted() {
	const _this = this;
    let time = setInterval(() => {
      if (this.flag == true) {
        clearInterval(time);
      }
      this.timeDown();
    }, 500);
    // 轮播滚动
    let timeSet = setInterval(() => {
      if (this.flag == true) {
        clearInterval(timeSet);
      }
      this.timeScroll();
    }, 2000);
    
    // 获取用户在后台管理系统中自定义的H5页面所显示的应用名称
    _this.ConfigItem();
  },
  methods: {
	getDomain() {
		const _this = this;
		if (process.env.NODE_ENV == "production") {
			_this.openid = localStorage.getItem("COPENID");
			if(_this.$route.query.openid&&_this.$route.query.openid!='undefined'){
				_this.openid = _this.$route.query.openid
				localStorage.setItem("COPENID",_this.openid);
			}
		} else {
			_this.openid = _this.$store.state.openid;
		}
		let params = {};
		_this.$request.getDomain(params).then((res) => {
			if(res.ret==200) {
				if(res.data.value.mainUrl&&res.data.value.cannonUrl){
					let domain = {
						mainUrl:res.data.value.mainUrl,
						cannonUrl:res.data.value.cannonUrl
					}
					_this.domain = domain
					console.log("getDomain_this.openid1:"+_this.openid)
					console.log("cannonUrl:"+location.href.indexOf(_this.domain.cannonUrl))
					if(location.href.indexOf(_this.domain.cannonUrl)>-1) {
						_this.openid = _this.$route.query.openid
						localStorage.setItem("COPENID",_this.openid);
						console.log('cannonUrl_this.openid',_this.openid)
					}
					//openid没拿到的时候
					if(!_this.openid||_this.openid=='undefined') {
						//当前为炮灰域名的时候
						if(location.href.indexOf(_this.domain.cannonUrl)>-1) {
							//跳转到主域名
							window.location.href = `${_this.domain.mainUrl}${
								location.href.indexOf("addons") > -1
								  ? "/addons/youmi_activitys/public"
								  : ""
							}/plugin/index.html#/caseShow/lottoActivity/activityShow/${Number(_this.$route.params.id)}?staff_id=${_this.$route.query.staff_id}&p_openid=${_this.$route.query.p_openid}`;
							return;
						}
					}else{
						_this.toCannonUrl()
					}
				}
				
				console.log("getDomain_this.openid2:"+_this.openid)
				if (!_this.openid || _this.openid == "undefined") {
				  _this.getWeixinConfig(); // 通过微信授权 获取 openID
				} else {
				  _this.getActivityItem(); // 获取活动数据的同时会调用getOrderItem、shareInit函数是、
				}
			}
		});
	},
	toCannonUrl() {
	  const _this = this;
	  if(location.href.indexOf(_this.domain.mainUrl)>-1) {
		//跳转到炮灰域名
		window.location.href = `${_this.domain.cannonUrl}${
			location.href.indexOf("addons") > -1
			  ? "/addons/youmi_activitys/public"
			  : ""
		}/plugin/index.html#/caseShow/lottoActivity/activityShow/${Number(_this.$route.params.id)}?staff_id=${_this.$route.query.staff_id}&p_openid=${_this.$route.query.p_openid}&openid=${_this.openid}`;
	  }
	},
  // 分享按钮
    shareBtn1() {
      this.cancelShow = true
    },
    // 取消按钮
    cancelChange() {
      this.cancelShow = false
    },
    // 生成海报
    shareChange() {
      this.cancelShow = false
      this.shareBtn()
    },
    btnClick() {
      this.click = true;
      this.showAdress = false;
    },
    // 跳到填写地址
    adressClick() {
      this.click = true;
      this.showAdress = false;
      this.$store.commit("setprizeItem", this.winningData.yes);
      this.$store.commit("setThemeColor", this.activityItem.theme_color);
      this.$router.push(
        `/caseShow/envelopesTalk/AdressForm?order_id=${this.order_id}&activity_id=${this.activityItem.id}&oid=2`
      );
    },
    // 自提奖品
    sinceClick() {
      this.click = true;
      this.showAdress = false;
    },
    // 继续抽奖
    continueClick() {
      this.click = true;
      this.showAdress = false;
      this.startCallBack();
    },
    // 跳转我也要发布活动
    releaseClick() {
      window.location.href = `//${location.hostname}${
        location.href.indexOf("addons") > -1
          ? "/addons/youmi_activitys/public"
          : ""
      }/mobile/index.html#/case/${this.activityItem.model}/${
        this.activityItem.id
      }?is_edit=${this.is_edit}&case_id=${this.activityItem.case_id}`;
    },
    // 查看商家信息
    merchantsClick() {
      this.merchantsShow = true;
      console.log(this.activityItem, "activityItemactivityItem");
    },
    helpTimes(activityItem) {
      const _this = this;
      console.log("_this.$route.query.p_openid", _this.$route.query.p_openid);
      const p_openid = _this.$route.query.p_openid;
      if (p_openid) {
        let params = {
          activity_id: activityItem.id,
          openid: _this.openid,
          p_openid: p_openid,
        };
        console.log(p_openid, "p_openid");
        _this.$request.receivingHelp(params).then((res) => {});
      }
    },
    timeScroll() {
      this.index++;

      if (this.index % 2 == 0) {
        this.scrollShow = true;
      }
      if (this.index % 2 != 0) {
        this.scrollShow = false;
      }
      if (this.index == this.num) {
        this.index = 0;
      }
    },
    // 抽中
    getscrollList(id) {
      let params = { activity_id: id };
      this.$request.scrollList(params).then((res) => {
        this.scrollList = res.data.data;
        console.log(this.scrollList, "this.scrollList");
        this.num = this.scrollList.length - 1;
      });
    },
    // 查询奖品列表
    getPagePriz() {
      const _this = this;
      const staff_id = _this.$route.query.staff_id;
      let params = {
        activity_id: _this.activity_id,
        openid: _this.openid
      };

      _this.$request.pagePrize(params).then((res) => {
        _this.prizeList = res.data.data;
        _this.end_time = res.data.end_time;
        _this.introduce = res.data.introduce;
        _this.draw = res.data.draw;
        _this.join_num = res.data.join_num;
        _this.getPrizesList(_this.prizeList);
      });
    },
    // shareClick() {
    //   this.showPop = true;
    // },

    getPrizesList(prizeList) {
      this.prizes = [];
      let data = prizeList;
      console.log(data, "data");
      if (!data) return;
      data.forEach((item, index) => {
        this.prizes.push({
          text: item.name,
          background: index % 2 ? "#f9e3bb" : "#f8d384",
          fonts: [{ text: item.name, top: "8%" }],
          imgs: [
            { src: item.picture, width: "30%", top: "35%", radius: "990px" },
          ],
        });
      });
    },
    startCallBack() {
      this.timer = true;
      if (this.timer) {
        this.timer = false;
        let params = { activity_id: this.activity_id, openid: this.openid };
        this.$request.doDraw(params).then((res) => {
          if (res.ret == 400) return this.$toast("活动还未开始,请开始后参与!");
          if (this.draw === 0)
            return this.$toast("抽奖次数不足，邀请好友增加抽奖参数");
          this.winningData = res.data;
          this.prize_type = res.data.prize_type;
          this.order_id = res.data.order_id;
          console.log(this.prize_type, "this.prize_typethis.prize_type");
          console.log(res.data, "res.data");
          console.log(res.data.sort, "res.data.sort");
          if (res.data == 1) return this.$toast("活动时间已结束");
          if (res.data == 2)
            return this.$toast("无法继续抽奖,您的总抽奖次数已达上限");
          if (res.data == 3) return this.$toast("抽奖次数不足");
          this.$refs.LuckyWheel.play();
          this.indexs = res.data.sort - 1;
          setTimeout(() => {
            this.$refs.LuckyWheel.stop(res.data.sort - 1);
          }, 3000);
        });
      }
    },

    endCallBack(prize) {
      console.log(prize, "prize");
      this.showAdress = true;
      this.getPagePriz();
    },
    // 我的礼品
    giftClick() {
      this.showGift = true;
      this.$toast("数据加载中");
      let params = { activity_id: this.activity_id, openid: this.openid };
      this.$request.prizeList(params).then((res) => {
        this.prizeLists = res.data.data;
        // console.log(this.prizeLists, "this.prizeLists");
      });
    },
    // 核销
    verificationClick(item) {
      this.$store.commit("setOrderItem", item);
      this.$router.push("/caseShow/lottoActivity/ApplyPZ");
    },

    // 好友助力
    // helpClick() {
    //   this.showHlep = true;

    // },
    // 好友助力排行
    getHelpsList() {
      let params = { activity_id: this.activity_id };
      this.$request.helpsList(params).then((res) => {
        let data = [];
        res.data.data.forEach((item) => {
          if (item.count != 0) {
            return data.push(item);
          }
        });
        let compare = function (obj1, obj2) {
          var val1 = parseFloat(obj1.count);
          var val2 = parseFloat(obj2.count);
          if (val1 < val2) {
            return -1;
          } else if (val1 > val2) {
            return 1;
          } else {
            return 0;
          }
        };
        let list = data.sort(compare).reverse().splice(0, 10);
        this.helpList = list
        console.log(this.helpList, "this.helpList");
      });
    },
    publishedClick() {
      this.getHelpsList();
      this.showHlep = true;
      // let params = { activity_id: this.activity_id };
      // this.$request.helpsList(params).then((res) => {
      //   this.helpList = res.data.data;
      // });
    },
    // 奖品规则
    ruelsClick() {
      this.ruelsShow = true;
    },

    // 倒计时
    timeDown() {
      const endTime = new Date(this.end_time).getTime();
      const nowTime = new Date(this.end_time);
      var date = new Date();
      var now = date.getTime(nowTime);
      //设置截止时间
      var endDate = new Date(endTime);
      var end = endDate.getTime();
      //时间差
      var rightTime = end - now; //截止时间减去当前时间
      if (rightTime > 0) {
        //判断剩余倒计时时间如果大于0就执行倒计时否则就结束
        var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
        var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
        var mm = Math.floor((rightTime / 1000 / 60) % 60);
        var ss = Math.floor((rightTime / 1000) % 60);
        this.dd = dd > 9 ? dd : "0" + dd;
        this.hh = hh > 9 ? hh : "0" + hh;
        this.mm = mm > 9 ? mm : "0" + mm;
        this.ss = ss > 9 ? ss : "0" + ss;
      } else {
        this.isfail = true;
      }
    },

    onSave(value) {
      let val = {};
      val.province = value.province;
      val.city = value.city;
      val.area = value.county;
      val.detail_address = value.addressDetail;
      console.log(val);
      let params = {
        activity_id: this.activity_id,
        openid: this.openid,
        val,
        order_id: this.order_id,
      };
      this.$request.savaAddress(params).then((res) => {
        console.log(res);
      });

      this.showAdress = false;
      this.verificationShow = true;
    },
    ConfigItem() {
      const _this = this;
      let params = {};
      _this.$request.ConfigItem(params).then((res) => {
        _this.config = res.data.value;
        console.log("_this.config", _this.config);
      });
    },
    shareInit(activityItem) {
      const _this = this;
      const url = location.href.split("#")[0];
      let params = {
        url: url,
      };
      _this.$request.configJssdk(params).then((res) => {
        wx.config({
          debug: false, // 是否开启调试模式
          appId: res.data.appId, //appid
          timestamp: res.data.timestamp, // 时间戳
          nonceStr: res.data.nonceStr, // 随机字符串
          signature: res.data.signature, // 签名
          jsApiList: [
            "checkJsApi",
            "updateAppMessageShareData",
            "updateTimelineShareData",
          ], // 需要使用的JS接口列表
        });
		let href = `${location.protocol}//${location.hostname}${
		  location.href.indexOf("addons") > -1
		    ? "/addons/youmi_activitys/public"
		    : ""
		}/plugin/index.html#/caseShow/${activityItem.model}/activityShow/${
		  activityItem.id
		}?staff_id=${_this.staff_id}&p_openid=${_this.openid}`;
        
        wx.updateAppMessageShareData({
          title: activityItem.sharetitle,
          desc: activityItem.share_describe, // 分享描述
          link: href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: activityItem.shareimg, // 分享图标
          success: function () {
            // 设置成功
          },
          fail: function (error) {
            // alert(JSON.stringify(error) )
          },
        });
        // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）这个是不支持加入描述的要注意一下
        wx.updateTimelineShareData({
          title: activityItem.sharetitle, // 这是分享展示卡片的标题
          desc: activityItem.share_describe, // 分享描述
          link: href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: activityItem.shareimg, // 分享图标
          success: function (ress) {
            // 设置成功
          },
          fail: function (error) {
            // alert(JSON.stringify(error));
          },
        });
        wx.error(function (error) {
          // alert(JSON.stringify(error));
        });
      });
    },
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果 
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
    shareBtn() {
      this.toTop()
      const _this = this;
      if (_this.activityItem.status == 2)  return _this.$toast("活动已结束");
      let params1 = {
        id: _this.activity_id,
      };
      _this.$request.getActivityItembase64(params1).then((res) => {
        _this.copyimg = res.data;
      });
      let params = { activity_id: _this.activity_id, openid: _this.openid };
      this.$request.itemsHelp(params).then((res) => {
        if (res.data === 1)
          return _this.$toast("无法继续分享,您的总抽奖次数已达上限");
        if (res.data === 2)
          return _this.$toast("今日助力次数已使用完,请明天继续");
        _this.showPop = true;
        _this.$nextTick(function () {
          _this.createQrcode();
        });
      });
    },
    createPoster() {
      // 生成海报
      const _this = this;
      const vm = this;
      vm.createLoading = true;
      const domObj = document.getElementById("posterHtml");
      html2canvas(domObj, {
        useCORS: true,
        allowTaint: true,
        logging: true,
        letterRendering: true,
        onclone(doc) {
          let e = doc.querySelector("#posterHtml");
          e.style.display = "block";
        },
      }).then(function (canvas) {
        // 在微信里,可长按保存或转发
        // let url = canvas.toDataURL('image/png')
        // const a = document.createElement('a'); // 创建a标签
        // a.setAttribute('download', `${new Date().getTime()}.png`);// download属性
        // a.setAttribute('href', url);// href链接
        // a.click();// 自执行点击事件
        let url = canvas.toDataURL("image/png");
        vm.createImg = url;
        vm.showImgPop = true;
        vm.createLoading = false;
        vm.showPop = false;
      });
    },
    createQrcode() {
      const _this = this;
	  
	  let href = ''
	  href = `${location.protocol}//${location.hostname}${
	    location.href.indexOf("addons") > -1
	      ? "/addons/youmi_activitys/public"
	      : ""
	  }/plugin/index.html#/caseShow/${_this.activityItem.model}/activityShow/${
	    _this.activityItem.id
	  }?staff_id=${_this.staff_id}&p_openid=${_this.openid}`;
	  //先去判断是否设置了炮灰域名
	  // if(_this.domain.cannonUrl) {
		 //  href = `http://${_this.domain.cannonUrl}${
		 //    location.href.indexOf("addons") > -1
		 //      ? "/addons/youmi_activitys/public"
		 //      : ""
		 //  }/plugin/index.html#/caseShow/${_this.activityItem.model}/activityShow/${
		 //    _this.activityItem.id
		 //  }?staff_id=${_this.staff_id}&p_openid=${_this.openid}`;
	  // }else{
		 //  href = `${location.protocol}//${location.hostname}${
		 //    location.href.indexOf("addons") > -1
		 //      ? "/addons/youmi_activitys/public"
		 //      : ""
		 //  }/plugin/index.html#/caseShow/${_this.activityItem.model}/activityShow/${
		 //    _this.activityItem.id
		 //  }?staff_id=${_this.staff_id}&p_openid=${_this.openid}`;
	  // }
      // new QRCode('qrcode', {
      //   width: 120, // 设置宽度，单位像素
      //   height: 120, // 设置高度，单位像素
      //   text: href // 设置二维码内容或跳转地址
      // })
      console.log(href, "hrefhref生成二维码链接");
      let canvas = document.getElementById("qrCode-canvas");
      QRCode.toCanvas(canvas, href, (error) => {
        if (error) {
          console.log(error);
        } else {
          canvas.style.width = "12rem";
          canvas.style.height = "12rem";
          // _this.createPoster();
        }
      });
    },
    getOrderItem() {
      const _this = this;
      let params = {
        openid: localStorage.getItem("COPENID"),
        activity_id: _this.activityItem.id,
      };
      _this.$request.getOrderItem(params).then((res) => {
        console.log(res, "setOrderItem");
        _this.$store.commit("setOrderItem", res.data);
        // 默认
        if (res.data.val && res.data.val != null) {
          _this.is_apply = true;
        }
        if (res.data.val && res.data.val.length > 0) {
          _this.is_apply = true;
        }
      });
    },
    getWeixinConfig() {
      const _this = this;
      let params = {};
      _this.$request.getWeixinConfig(params).then((res) => {
        _this.$store.commit("setAppid", res.data.value.appid);
        _this.$store.commit("setSecret", res.data.value.secret);
        //_this.getCode(res.data.value.appid)
        if (process.env.NODE_ENV == "production") {
          _this.getCode(res.data.value.appid);
        } else {
          if (!_this.activityItem) {
            _this.getActivityItem();
          }
        }
      });
    },
    getCode(appid) {
      // 非静默授权，第一次有弹框
      const _this = this;
      const code = this.getUrlParam("code"); // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
      const local = window.location.href;
      if (code == null || code === "") {
        window.location.href =
          "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
          appid +
          "&redirect_uri=" +
          encodeURIComponent(local) +
          "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
      } else {
        _this.$store.commit("setCode", code);
        _this.getOpenId(code); //把code传给后台获取用户信息
      }
    },
    getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    getFansItem(item) {
      console.log("fansItem:", item);
      const _this = this;
      let params = {
        openid: item.openid || localStorage.getItem("COPENID"),
        nickname: item.nickname,
        name: item.nickname,
        avatar: item.avatar,
        province: item.province,
        city: item.city,
      };
      console.log("item.openid", item.openid);
      console.log("fansItem:", item);
      _this.$request.getFansItem(params).then((res) => {
        // 默认
        // _this.getOrderItem();
      });
    },
    getOpenId(code) {
      const _this = this;
      let params = {
        appid: _this.$store.state.appid,
        secret: _this.$store.state.secret,
        code: code,
      };
      _this.$request.getOpenid(params).then((res) => {
        if (res.data[0] && res.data[0] == 1) {
          //这里需进行页面跳转，把当前链接中的code信息给过滤掉
          const url = location.href;
          window.location.href = `${url.split("?")[0]}#${url.split("#")[1]}`;
        } else {
          const userInfo = res.data[0];
          const openid = userInfo.openid;
          _this.openid = openid;
          const nickname = userInfo.nickname;
          const headimgurl = userInfo.headimgurl;
          const province = userInfo.province;
          const city = userInfo.city;
          // const headimgurl = userInfo["headimgurl"];
          // const headimgurl = userInfo["headimgurl"];
          // const unionid = res.data.unionid;
          _this.$store.commit("setOpenid", openid);
          localStorage.setItem("COPENID", openid);
          const item = {
            openid,
            nickname,
            avatar: headimgurl,
            province,
            city,
            name: nickname,
          };
          _this.$store.commit("setUserInfo", item);
          localStorage.setItem("USERINFO", JSON.stringify(item));
          _this.getFansItem(item);
          _this.getActivityItem();
		  _this.toCannonUrl()
        }
      });
    },
    judgeIsApply() {
      const _this = this;
      const apply_list = _this.activityItem.apply_list;
      // _this.openid = "111"
      const isApply = apply_list.some((res) => res.openid == _this.openid);
      this.activityItem.is_apply = isApply;
    },
    getActivityItem() {
      const _this = this;
      const toast = Toast.loading({
        forbidClick: true,
        message: "加载中...",
      });
      let params = {
        id: Number(_this.$route.params.id),
        openid: localStorage.getItem("COPENID"),
      };
      _this.$request.getActivityItem(params).then((res) => {
        _this.activityItem = res.data;
        _this.theme_color = res.data.theme_color;
        _this.btn_color = res.data.btn_color;
        document.title = _this.activityItem.title;
        if (_this.activityItem) {
          // const item = JSON.parse(localStorage.getItem("USERINFO"))
          // if(item) {
          //   _this.getFansItem(item)
          // }
          // _this.getOrderItem(); // 获取订单数据

          _this.getPagePriz();
          document.title = _this.activityItem.title;
          _this.getscrollList(_this.activityItem.id);
		  _this.shareInit(_this.activityItem); // 调用微信分享的API
          _this.helpTimes(_this.activityItem);
          _this.getHelpsList();
          _this.getPrizesList();
          _this.loadingSkeleton = false;
        }
        _this.$store.commit("setActivityItem", _this.activityItem);
        document.title = _this.activityItem.title;
        toast.clear();
      });
    },
	
    toCaseView() {
      window.location.href = `//${location.hostname}${
        location.href.indexOf("addons") > -1
          ? "/addons/youmi_activitys/public"
          : ""
      }/mobile/index.html`;
    },
    toView(to) {
      if (to == "applyTrue") {
        this.$router.push(`/caseShow/applyActivity/applyPZ`);
      } else {
        this.$router.push(`/caseShow/applyActivity/applyForm`);
      }
    },
  },
};
</script>